<template>
	<view class="container">
		<uni-nav-bar title="购物车" statusBar="true" fixed="true" color="#000000" backgroundColor="#ffffff"></uni-nav-bar>
		<!-- 顶部店铺信息 -->
		<view class="store-header">
			<text class="store-name">线上小卖部</text>
			<view class="header-right">
				<text class="coupon">优惠券</text>
				<text class="edit" v-if="!isEdit" @click="openEdit()">编辑</text>
				<text class="edit" v-if="isEdit" @click="closeEdit()">完成</text>

			</view>
		</view>

		<!-- 商品列表 -->
		<scroll-view class="content" scroll-y>
			<view class="cart-list">
				<view class="goods-item" v-for="(item, index) in cartList" :key="index">
					<view class="select-btn" @click="unChecked(item)">
						<text class="circle " :class="{ active: selectSet.has(item.id) }">
							<text v-if="selectSet.has(item.id)" class="check">✓</text>
						</text>
					</view>
					<image class="goods-img" :src="item.image" mode="aspectFill"></image>
					<view class="goods-info">
						<view class="goods-name">{{item.name}}</view>
						<view class="goods-spec" v-if="item.productTypeValue">{{item.productTypeValue}}</view>

						<view class="price-count">
							<text class="price">
								<text class="symbol">¥</text>
								<text class="number">{{item.product.price}}</text>
							</text>
							<view class="count-ctrl">
								<view @click="minusProductToCart(item)"> <text class="minus">-</text> </view>
								<text class="count">{{item.number}}</text>
								<view @click="addProductToCart(item)"> <text class="plus">+</text> </view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 推荐商品 -->
			<view class="recommend">
				<view class="recommend-title">推荐商品</view>
				<view class="recommend-list">
					<view class="recommend-item" v-for="(item, index) in recommendList" :key="index">
						<image :src="item.image" mode="aspectFill"></image>
						<view class="item-info">
							<view class="item-name">{{item.name}}</view>
							<view class="item-price-cart">
								<text class="item-price">
									<text class="symbol">¥</text>
									<text class="number">{{item.price}}</text>
								</text>
								<image class="cart-icon" src="/static/addcart.png"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部结算栏 -->
		<view class="bottom-bar">
			<view class="total-info" v-if="!isEdit">
				<text>合计：</text>
				<text class="total-price">¥ {{totalPrice}}</text>
			</view>
			<view class="checkout-btn" @click="goOrder()" v-if="!isEdit">
				去结算 ({{totalNumber}})
			</view>

			<view class="total-info" v-if="isEdit" >
				<text >
						全选
				</text>
			</view>
			<view class="delete-btn" @click="deleteCart()" v-if="isEdit"> 删除商品 </view>
		</view>
		<view-tabbar tabIndex=2></view-tabbar>
	</view>
</template>


<script src="./index.js"></script>
<style src="./index.scss" lang="scss" scoped></style>
<style scoped>
	/* #ifdef MP-WEIXIN || APP-PLUS */
	::v-deep ::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
		color: transparent;
	}

	/* #endif */
</style>